<template>
  <div>
    <!--    <van-dropdown-menu>-->
    <!--      &lt;!&ndash;      地区&ndash;&gt;-->
    <!--      <van-dropdown-item v-model="area" :options="areaoption" :title="area" @change="changeList"/>-->
    <!--      &lt;!&ndash;      类型&ndash;&gt;-->
    <!--      <van-dropdown-item v-model="type" :options="typeoption" :title="type" @change="changeList"/>-->
    <!--      &lt;!&ndash;      排序&ndash;&gt;-->
    <!--      <van-dropdown-item v-model="order" :options="orderoption" :title="order" @change="changeList"/>-->
    <!--    </van-dropdown-menu>-->
    <van-collapse v-model="activeNames">
      <van-collapse-item title="筛选" name="1">
        <!--      地区-->
        <div class="subject">
          <div class="title">地区：</div>
          <ul>
            <li v-for="(i,index) in areaoption" :key="index"
                :class="[{'active':i.value===area}]"
                @click="clickArea(i.value)">
              {{ i.value }}
            </li>
          </ul>
        </div>
        <!--      类型-->
        <div class="subject">
          <div class="title">类型：</div>
          <ul>
            <li v-for="(i,index) in typeoption" :key="index" :class="[{'active':i.value===type}]"
                @click="clicktype(i.value)">
              {{ i.value }}
            </li>
          </ul>
        </div>
        <!--      排序-->
        <div class="subject">
          <div class="title">排序：</div>
          <ul>
            <li v-for="(i,index) in orderoption" :key="index" :class="[{'active':i.value===order}]"
                @click="clickOrder(i.value)">
              {{ i.value }}
            </li>
          </ul>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
// import {getMV} from "@/api/login-aip";
import {mapState} from "vuex";
import {getMV} from "@/api/login-aip";

export default {
  name: "MVmenu",
  data() {
    return {
      area: "全部",
      type: "全部",
      order: "上升最快",
      MVmenu: [],
      activeNames: [''],
      areaoption: [
        {text: '全部', value: '全部'},
        {text: '内地', value: '内地'},
        {text: '港台', value: '港台'},
        {text: '欧美', value: '欧美'},
        {text: '日本', value: '日本'},
        {text: '韩国', value: '韩国'},
      ],
      typeoption: [
        {text: '全部', value: '全部'},
        {text: '官方版', value: '官方版'},
        {text: '原生', value: '原生'},
        {text: '现场版', value: '现场版'},
        {text: '网易出品', value: '网易出品'},
      ],
      orderoption: [
        {text: '上升最快', value: '上升最快'},
        {text: '最热', value: '最热'},
        {text: '最新', value: '最新'},
      ]
    };
  },
  computed: {
    ...mapState(['MVList'])
  },
  created() {
    this.area = this.$route.query.area
    this.type = this.$route.query.type
    this.order = this.$route.query.order
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    // changeList() {
    //   this.$emit("fromMV", [this.area, this.type, this.order])
    // },
    clickArea(e) {
      this.area = e
      this.$router.push({
        path: '/MVPage',
        query: {
          area: this.area,
          type: this.type,
          order: this.order
        }
      })
      getMV(this.$route.query.area, this.$route.query.type, this.$route.query.order).then(res => {
        this.$emit("fromMV", res.data)
      })
    },
    clicktype(e) {
      this.type = e
      this.$router.push({
        path: '/MVPage',
        query: {
          area: this.area,
          type: this.type,
          order: this.order
        }
      })
      getMV(this.$route.query.area, this.$route.query.type, this.$route.query.order).then(res => {
        this.$emit("fromMV", res.data)
      })
    },
    clickOrder(e) {
      this.order = e
      this.$router.push({
        path: '/MVPage',
        query: {
          area: this.area,
          type: this.type,
          order: this.order
        }
      })
      getMV(this.$route.query.area, this.$route.query.type, this.$route.query.order).then(res => {
        this.$emit("fromMV", res.data)
      })
    }
  },
}
</script>

<style scoped lang="less">
.active {
  background-color: #42b983;
  color: white;
}

.subject {
  display: flex;
  font-size: 16px;

  .title {
    color: #000000;
    float: left;
    width: 50px;
    margin-top: 10px;
  }

  ul {
    margin-top: 6px;

    li {
      float: left;
      padding: 2px;
      margin: 0 2px;
    }
  }
}
</style>